<template>
    <div class="snow-page">
        <a-card title="传感器列表">
            <template #extra>
                <a-button size="mini" type="primary" @click="goBack">返回</a-button>
            </template>
            <a-form :model="formData.form" :label-col-props="{ span: 5 }" :wrapper-col-props="{ span: 18 }"
                ref="formRef">
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item field="trigger_type" label="类型">
                            <a-select v-model="formData.form.trigger_type" placeholder="类型" allow-clear allow-search>
                                <a-option v-for="item in dicrList" :key="item.id" :value="item.id" :label="item.name">{{
                                    item.name
                                }}</a-option>
                            </a-select>

                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="时间">
                            <a-range-picker v-model="timeRange" show-time :time-picker-props="{
                                defaultValue: ['00:00:00', '00:00:00']
                            }" :shortcuts="[
                                {
                                    label: '7天',
                                    value: () => [dayjs(), dayjs().add(1, 'week')],
                                },
                                {
                                    label: '一个月',
                                    value: () => [dayjs(), dayjs().add(1, 'month')],
                                },
                                {
                                    label: '1年',
                                    value: () => [dayjs(), dayjs().add(1, 'year')],
                                },
                            ]" @change="onChange"></a-range-picker>
                        </a-form-item>
                    </a-col>

                    <a-col :span="6">
                        <a-space>
                            <a-button type="primary" @click="onSearch">
                                <template #icon>
                                    <icon-search />
                                </template>
                                <template #default>查询</template>
                            </a-button>
                            <a-button @click="onReset">
                                <template #icon>
                                    <icon-refresh />
                                </template>
                                <template #default>重置</template>
                            </a-button>

                        </a-space>
                    </a-col>
                </a-row>
            </a-form>

            <a-table :data="tabData" row-key="id" size="small" bordered :pagination="false">
                <template #columns>
                    <a-table-column title="用户名">
                        <template #cell="{ record }">
                            {{ record.name }}
                        </template>
                    </a-table-column>
                    <a-table-column title="发送类型">
                        <template #cell="{ record }">

                            {{record.data?.trigger_type }}
                        </template>
                    </a-table-column>
                    <a-table-column title="报警信息">
                        <template #cell="{ record }">
                            {{ record.content }}
                        </template>
                    </a-table-column>
                    <a-table-column title="时间">
                        <template #cell="{ record }">
                            {{ timestampToTime(record.atime) }}
                        </template>
                    </a-table-column>

                </template>
            </a-table>
            <a-pagination :total="total" style="margin-top:10px;" @change="changePage" />
        </a-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getDictBycode2API } from "@/api/modules/dictionary/index"
import { getstatistic2ListAPI } from "@/api/modules/statistic/index"
import dayjs from 'dayjs';
const router = useRouter();
const route = useRoute();
onMounted(() => {
    dictInit()

    init()
})
function timestampToTime(timestamp) {
    let date = new Date(timestamp); // 如果时间戳是10位数，则需要乘以1000
    let Y = date.getFullYear() + '-';
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    return Y + M + D + h + m + s;
}
const tabData = ref([])
const total = ref(0)
async function init() {
    let obj = {
        paged: formData.paged,
        pageSize: formData.pageSize
    }
    total.value = 0;
    tabData.value = []
    let res = await getstatistic2ListAPI(obj, formData.form);
    if (res.status == 2) {
        total.value = res.data.totalCount
        tabData.value = res.data.data
    }
}
const dicrList = ref()

async function dictInit() {
    let res = await getDictBycode2API("58,360");
    if (res.status == 2) {
        dicrList.value = res.data
    }

}

function onChange(dateString) {
    console.log('onChange: ', dateString);
    formData.form.start_time = dateString[0]
    formData.form.end_time = dateString[1]
}
const today = dayjs();
const last7Days = [];

for (let i = 0; i < 2; i++) {
    const date = today.subtract(i, 'day').format('YYYY-MM-DD HH:mm:ss');
    last7Days.push(date);
}

const timeRange = ref([last7Days[last7Days.length - 1], last7Days[0]])
const formData = reactive({
    form: {
        trigger_type: "",
        user_id: route.query.userid,
        end_time: timeRange.value[1],
        start_time: timeRange.value[0]
    },
    paged: 1,
    pageSize: 10
});
const formRef = ref();
const onReset = () => {
  formRef.value.resetFields();
  init();
};

function changePage(page) {

  formData.paged = page;
  init()
}

function onSearch() {
  init();
}
function goBack() {
    router.back();
}
</script>

<style lang="scss" scoped></style>